<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../static/css/mailbox.css" />
<body >
<div class="my-container">
    <p class="top-p">
        <span class="left">系统通知</span>
        <span class="right"><a onclick="readMail(0)">清空所有通知</a></span>
    </p>
    <hr />

    <div id="mailbox"></div>

</div>
<script src="../static/js/jquery-3.0.0.min.js"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script>
    $(document).ready(function(){
        $.ajax({	//获取通知
            url:"/mailbox/mailList",
            type:"post",
            headers:{
                Authorization:sessionStorage.Authorization
            },
            success:function(result){
                if(result.code==200){
                    $.each(result.data,function(index,mail){
                        if(mail.type == 1){
                            mail.type = "充值成功";
                        }else if(mail.type == 2){
                            mail.type = "书籍被购买"
                        }else if(mail.type == 3){
                            mail.type = "评论被回复"
                        }else if(mail.type == 4){
                            mail.type = "用户信息更改成功"
                        }
                        $("#mailbox").append(
                            "<div class='notification'>"+
                            "<div class='top-div'>"+
                            "<p>"+
                            "<span class='label label-info'>系统</span>"+
                            "<span>"+mail.type+"</span>"+
                            "<a class='glyphicon glyphicon-trash right' onclick='readMail("+mail.id+")'></a>"+
                            "</p>"+
                            "</div>"+
                            "<div class='bottom-div'>"+
                            "<p>"+mail.content+"</p>"+
                            "</div>"+
                            "</div>"
                        );
                    });
                }else if(result.code==401){
                    sessionStorage.removeItem("Authorization");
                    layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
                }else{
                    layer.msg(result.msg,{icon: 2,time:2000});
                }
            }
        })
    });
    function readMail(id) {
        $.ajax({
            url: "/mailbox/readMail",
            type: "post",
            data:{
                "id":id
            },
            headers: {
                Authorization: sessionStorage.Authorization
            },
            success: function (result) {
                if (result.code == 200) {
                    window.location.reload();
                }else if(result.code==401){
                    sessionStorage.removeItem("Authorization");
                    layer.msg(result.msg,{icon: 2,time:2000},function(){window.location.href="../index.html"});
                }else{
                    layer.msg(result.msg,{icon: 2,time:2000});
                }
            }
        })
    }
</script>
</body>
</html>
